<template>
  <view class="mian">
    <view class="wrap">
      <view class="u-tabs-box">
        <u-tabs
          activeColor="#f29100"
          ref="tabs"
          :list="list"
          :current="current"
          @change="change"
          :is-scroll="false"
          swiperWidth="750"
        />
      </view>
      <view class="data-box">
        <view v-show="!startDate">全部</view>
        <view v-show="startDate">{{ startDate }}--{{ endDate }}</view>
        <view @click="onC">选择时间</view>
      </view>

      <view class="page-box">
        <view v-if="orderList[current].length > 0">
          <view
            class="order"
            v-for="(res, index) in orderList[current]"
            :key="res.FBillNo"
          >
            <view class="top">
              <view class="left">
                <u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
                <view class="store">{{ res.StockName }}</view>
                <u-icon
                  name="arrow-right"
                  color="rgb(203,203,203)"
                  :size="26"
                ></u-icon>
              </view>
            </view>
            <view class="item">
              <view class="content">
                <view class="title u-line-2">{{ res.FRemark }}</view>
                <view class="delivery-time"> {{ res.FDate }}</view>
              </view>
              <view class="right">
                <view class="price"> ￥{{ res.mFAmount }} </view>
              </view>
            </view>
          </view>
        </view>
        <view class="centre" v-else>
          <image
            :src="require('@/static/images/taobao-order.png')"
            mode=""
          ></image>
          <view class="explain">
            您还没有相关的数据
            <view class="tips">You have no relevant data</view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-bar">
      <view class="left">
        <text class="base-title">当前余额:</text>
        <text class="price">
          <text class="synbol">￥</text>
          {{ money }}
        </text>
      </view>
      <text class="topUp" @click="navTo('/pages/member/deposit')">
        去充值
      </text>
    </view>
    <u-calendar
      :show="calendarVisible"
      mode="range"
      @confirm="onDateChange"
      @close="calendarVisible = false"
      :minDate="minDate"
      :maxDate="maxDate"
    ></u-calendar>
  </view>
</template>

<script>
import { reqPost } from "../../common/http.request";
import date from "../../utils/date";
export default {
  data() {
    return {
      calendarVisible: false,
      startDate: "",
      endDate: "",
      orderList: [[], [], []],
      list: [{ name: "充值" }, { name: "消费" }, { name: "次卡" }],
      money: 0,
      current: 0,
      swiperCurrent: 0,
      tabsHeight: 0,
      dx: 0,
      dty: 1,
      loadStatus: ["nomore", "loadmore", "loadmore"],
    };
  },
  onShow() {
    this.money = uni.getStorageSync("Members")[0].Amount;
  },
  onLoad() {
    this.getOrderList(this.current);
  },
  computed: {
    minDate() {
      return date.getDate(-83);
    },
    maxDate() {
      return date.getDate(7);
    },
  },
  methods: {
    navTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    onDateChange(e) {
      console.log(e, "e");
      this.startDate = e[0];
      this.endDate = e[e.length - 1];
      this.getOrderList(this.current);
      this.calendarVisible = false;
    },
    reachBottom() {
      // 此tab为空数据
      //   this.getOrderList(this.current);
    },
    // 页面数据
    async getOrderList(idx) {
      if (idx === 0) {
        this.dty = 1;
      } else if (idx === 1) {
        this.dty = -1;
      } else if (idx === 2) {
        this.dty = 3;
      }
      let list = (
        await reqPost("GetMemberDeposit", {
          DataType: this.dty,
          DateStar: this.startDate || "",
          DateEnd: this.endDate || "",
          PageIndex: 1,
          PageSize: 999,
        })
      ).Data;
      /*    let newArr = list.filter(
        (item) =>
          !this.orderList[idx].some((ele) => ele.FCorpID === item.FCorpID)
      ); */
      //   this.orderList[idx].push(...newArr);
      this.orderList[this.current] = list;
      // console.log('sdas', this.orderList[idx])
      // this.loadStatus.splice(this.current,1,"loadmore")
    },
    // 总价
    totalPrice(item) {
      let price = 0;
      item.map((val) => {
        price += parseFloat(val.price);
      });
      return price.toFixed(2);
    },
    // tab栏切换
    change(index) {
      this.swiperCurrent = index;
      this.getOrderList(index);
      switch (index) {
        case 0:
          uni.setNavigationBarTitle({
            title: "余额明细",
          });
          console.log(this.current);
          break;
        case 1:
          uni.setNavigationBarTitle({
            title: "消费明细",
          });
          break;
        case 2:
          uni.setNavigationBarTitle({
            title: "次卡明细",
          });
          break;
      }
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    onC() {
      console.log("onc :>> ");
      this.calendarVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.mian {
  height: 100%;
  background-color: #f2f2f2;
}
.order {
  width: 710rpx;
  background-color: #ffffff;
  margin: 10rpx auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 10rpx;
  font-size: 28rpx;
  .top {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      .store {
        margin: 0 10rpx;
        font-size: 26rpx;
        font-weight: 400;
      }
    }
    .right {
      color: $u-type-warning-dark;
    }
  }
  .item {
    display: flex;
    // margin: 20rpx 0 0;
    .left {
      margin-right: 20rpx;
      image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 10rpx;
      }
    }
    .content {
      width: 100%;
      .title {
        font-size: 28rpx;
        line-height: 50rpx;
        color: #707070;
      }
      .type {
        margin: 10rpx 0;
        font-size: 24rpx;
        color: $u-tips-color;
      }
      .delivery-time {
        color: #a7a7a7;
        font-size: 24rpx;
      }
    }
    .right {
      flex-shrink: 0;
      margin-left: 10rpx;
      padding-top: 20rpx;
      text-align: right;
      .decimal {
        font-size: 24rpx;
        margin-top: 4rpx;
      }
      .number {
        color: $u-tips-color;
        font-size: 24rpx;
      }
    }
  }
  .total {
    margin-top: 20rpx;
    text-align: right;
    font-size: 24rpx;
    .total-price {
      font-size: 32rpx;
    }
  }
  .bottom {
    display: flex;
    margin-top: 40rpx;
    padding: 0 10rpx;
    justify-content: space-between;
    align-items: center;
    .btn {
      line-height: 52rpx;
      width: 160rpx;
      border-radius: 26rpx;
      border: 2rpx solid $u-border-color;
      font-size: 26rpx;
      text-align: center;
      color: $u-type-info-dark;
    }
    .evaluate {
      color: $u-type-warning-dark;
      border-color: $u-type-warning-dark;
    }
  }
}
.centre {
  text-align: center;
  margin: 200rpx auto;
  font-size: 32rpx;
  image {
    width: 164rpx;
    height: 164rpx;
    border-radius: 50%;
    margin-bottom: 20rpx;
  }
  .tips {
    font-size: 24rpx;
    color: #999999;
    margin-top: 20rpx;
  }
  .btn {
    margin: 80rpx auto;
    width: 200rpx;
    border-radius: 32rpx;
    line-height: 64rpx;
    color: #ffffff;
    font-size: 26rpx;
    background: linear-gradient(
      270deg,
      rgba(249, 116, 90, 1) 0%,
      rgba(255, 158, 1, 1) 100%
    );
  }
}
.wrap {
  display: flex;
  flex-direction: column;
  height: calc(
    100vh - var(--window-top) - env(safe-area-inset-bottom) - 100rpx
  );
  width: 100%;
}
.swiper-box {
  flex: 1;
}
.swiper-item {
  height: 100%;
}
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 1);
  .left {
    width: 100%;
    height: 100rpx;
    padding-left: 28rpx;
    color: #191919;
    display: flex;
    align-items: center;
    background: linear-gradient(120deg, #f9745a 0%, #ffdd55 100%);

    .base-title {
      font-size: 28rpx;
      line-height: 38rpx;
      display: inline-block;
      vertical-align: top;
    }

    .price {
      margin-left: 10rpx;
      font-size: 56rpx;
      line-height: 80rpx;

      .synbol {
        font-size: 26rpx;
      }
    }
  }
  .topUp {
    height: 100rpx;
    display: flex;
    align-items: center;
    padding: 0 28rpx;
    color: #191919;
    line-height: 80rpx;
    background: linear-gradient(270deg, #f9745a 0%, #ff9e01 100%);
    color: #fff;
    flex-shrink: 0;
  }
}

.data-box {
  position: relative;
  //   width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 28rpx;
  background-color: #fefefe;
  &::after {
    display: block;
    content: "";
    height: 1px;
    width: 710rpx;
    background-color: #f9745a;
    position: absolute;
    top: 0;
    left: 20rpx;
  }
}
</style>
